<template>
  <el-card class="flow-count-status-card">
    <template #header>
      <div class="header">
        <i class="online-icon icon-flow-count-card" />
        <span style="margin-left: 8px">我的审批</span>
      </div>
    </template>
    <el-row type="flex" justify="space-between" align="middle">
      <div
        class="flow-count-card-item"
        v-for="(item, index) in statusItems"
        :key="index"
        @click="onClick(item)"
      >
        <el-image
          class="flow-count-card-item-icon"
          :src="item.icon"
          fit="contain"
          style="width: 64px; height: 64px"
        />
        <div class="flow-count-card-item-content">
          <div class="count">{{ item.count }}</div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { useLayoutStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { findTreeNode } from '@/common/utils';
import { FlowOperationController } from '@/api/flow';

const layoutStore = useLayoutStore();
const router = useRouter();

const props = withDefaults(
  defineProps<{
    disabled: boolean;
  }>(),
  {
    disabled: false,
  },
);
const emit = defineEmits(['click']);
const { getMenuList, setCurrentMenuId, setCurrentMenu } = layoutStore;

const statusItems = ref([
  {
    icon: require('@/assets/img/runtimeTask.png'),
    count: 0,
    title: '待办任务',
    router: 'formMyTask',
  },
  {
    icon: require('@/assets/img/historicTask.png'),
    count: 0,
    title: '已办任务',
    router: 'formMyApprovedTask',
  },
  {
    icon: require('@/assets/img/allMyWorkOrder.png'),
    count: 0,
    title: '我发起的',
    router: 'flowMyStartedTask',
  },
  {
    icon: require('@/assets/img/copyMessage.png'),
    count: 0,
    title: '我的抄送',
    router: 'formFlowMessage',
    query: { type: 'copyMessage' },
  },
  {
    icon: require('@/assets/img/remindingMessage.png'),
    count: 0,
    title: '我的催办',
    router: 'formFlowMessage',
    query: { type: 'remindingMessage' },
  },
]);

const onClick = item => {
  if (props.disabled) {
    return;
  }
  let menu = findTreeNode(getMenuList, item.router, 'formRouterName');
  if (menu) {
    setCurrentMenu(menu);
  }
  router.push({
    name: item.router,
    query: item.query,
  });
};

const fetchStatusCounts = () => {
  // Simulate an API call to fetch status counts
  FlowOperationController.getFlowCountStats({})
    .then(res => {
      if (res && res.data) {
        statusItems.value[0].count = res.data.runtimeTaskCount || 0; // 待办任务
        statusItems.value[1].count = res.data.historicTaskCount || 0; // 已办任务
        statusItems.value[2].count = res.data.allMyWorkOrderCount || 0; // 我发起的
        statusItems.value[3].count = res.data.copyMessageCount || 0; // 我的抄送
        statusItems.value[4].count = res.data.remindingMessageCount || 0; // 我的催办
      }
    })
    .catch(err => {
      console.error('Error fetching status counts:', err);
    });
};

onMounted(() => {
  fetchStatusCounts();
});
</script>

<style scoped>
.flow-count-card-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}
.flow-count-card-item-content {
  margin-left: 10px;
}
.flow-count-card-item-icon {
  width: 64px;
  height: 64px;
}
.count {
  font-size: 24px;
  color: #000000;
  font-weight: 600;
}
.title {
  font-size: 14px;
  color: #747474;
  margin-top: 4px;
}
.header {
  display: flex;
  align-items: center;
  padding: 20px 0px;
  font-size: 16px;
  color: #222222;
  font-weight: 500;
  border-bottom: 1px solid #f1f1f1;
}
.flow-count-status-card /deep/ .el-card__header {
  padding: 0px 23px;
  border: none !important;
}
.flow-count-status-card /deep/ .el-card__body {
  padding: 20px 23px;
}
</style>
